<template>
  <page-header-wrapper :title="false">
    <a-card
      :loading="loading"
    >
      <a-card-meta>
        <div slot="title" :style="{ textAlign: 'center' }">
          <h2>{{messageDetail.title}}</h2>
        </div>
        <div slot="description" :style="{ textAlign: 'center' }">
          消息类型：{{msgTypeOpts[messageDetail.msg_type]}} 发布人：{{messageDetail.create_uid}} 发布时间：{{messageDetail.created_at}}
        </div>
      </a-card-meta>
      <div class="ql-editor" :style="{ padding: '0 50px', marginTop: '40px', fontSize: '16px' }" v-html="messageDetail.content">
      </div>
      <a-divider />
      <div :style="{ padding: '0 50px', marginTop: '10px' }">【下载附件】：<a-button v-if="messageDetail.file != ''" type="link" @click="download(messageDetail.file)">
        {{messageDetail.filename}}</a-button></div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { getMsgDetail, setRead } from '@/api/message'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

  export default {
    name: 'MessageDetail',
    data () {
      return {
        loading: false,
        messageDetail: {},
        msgTypeOpts: {}
      }
    },
    activated () {
      this.getDetail(this.$route.params.id)
    },
    methods: {
      getDetail (id) {
        const app = this
        app.loading = true
        setRead(id).then(res => {
          if (res.status === 0) {
            getMsgDetail(id).then(res => {
              app.msgTypeOpts = res.result.msg_opts
              app.messageDetail = res.result.msg
              app.loading = false
            })
          } else {
            app.$warning({
              title: res.msg
            })
            app.loading = false
          }
        })
      },
      download (file) {
        window.open(file)
      }
    }
  }
</script>

<style scoped>
</style>
